<template>
  <div class="layout" >
    <el-form ref="formRef" :model="formData" label-width="85px" class="form_box" :disabled="pageType === 'look'">
    <div style="font-weight: 600; padding-bottom: 20px;">参与设置</div>
    <el-form-item label="客户类型">
      <el-radio v-model="formData.customer_type" :label="1">不限</el-radio>
      <el-radio v-model="formData.customer_type" :label="2">仅限新客户</el-radio>
    </el-form-item>
    <el-form-item label="助力者限制">
      <el-radio v-model="formData.help_type" :label="1">不限</el-radio>
      <el-radio v-model="formData.help_type" :label="2">仅限新客户</el-radio>
    </el-form-item>
    <!-- <el-form-item label="助力次数">
      <el-radio v-model="formData.help_num_type" :label="1">不限</el-radio>
      <el-radio v-model="formData.help_num_type" :label="2">仅限</el-radio>
    </el-form-item> -->
    <el-form-item v-if="formData.help_num_type == 2"> <el-input v-model="formData.help_num_type" placeholder="请输入限制次数" class="adorn"></el-input><span>次</span> </el-form-item>
    <el-form-item label="地区限制">
      <el-radio v-model="formData.limit_address_type" :label="1">不限</el-radio>
      <el-radio v-model="formData.limit_address_type" :label="2">部分地区可参与</el-radio>
    </el-form-item>
    <el-form-item v-if="formData.limit_address_type == 2">
      <el-cascader v-model="formData.limit_address_value" :options="cityData" :props="defaultProps" style="width: 100%">
        <template #default="{ node, data }">
          <span>{{ data.name }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
    </el-form-item>
  </el-form>
  </div>
  <TPDialog ref="TPDialogRef" @submit="onInfo"></TPDialog>
</template>

<script setup lang="ts">
  import { ref, defineExpose, defineProps, watch } from 'vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { getMarketinGroupgList } from '@/api/smartMarketing/group'
  import cityData from '@/assets/js/city'
  import TPDialog from '@/components/TPDialog.vue'
  const emit = defineEmits(['submit'])
  const TPDialogRef: any = ref(null)
  const formRef: any = ref(null)
  const props = defineProps<{
    pageType: {
      type: string
    }
  }>()
  const formData = ref({
    customer_type: 1, //客户限制 1-不限 2-新客户
    help_type: 1, //助力者限制 1-不限 2-新客户
    help_num_type: 1, //助力次数 1-不限 2-限制
    help_num_value: 10, //help_num_type为2 必填
    customer_gender: 1, //性别限制 1-不限 2-男性 3女性
    limit_address_type: 1, //地区限制 1-不限 2-部分地区
    limit_address_value: [] //limit_address_type为2 必填
  })
  const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'id'
  }
  const publicInfo = ref({})
  const onInfo = (val: any) => {
    console.log(val)

    formData.value.official_account_id = val.id
    publicInfo.value = val
  }
  const onTimes = (val: any) => {
    console.log(val)
    console.log(formData.value)

    formData.value.begin_date = val[0]
    formData.value.end_date = val[1]
  }
  const groupOptions = ref([])
  getMarketinGroupgList({ type: 13, name: '' }).then((res: any) => {
    groupOptions.value = res.data
  })
  watch(
    formData,
    (val) => {
      emit('submit', val)
    },
    { deep: true }
  )

  defineExpose({
    formData,
    formRef,
    publicInfo
  })
</script>

<style lang="scss" scoped>
.layout {
  padding-left: 4px;
  padding-top:4px
}
  .adorn {
    width: 190px;
    display: inline-block;
    margin-right: 10px;
  }
  .official_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 1px solid #eaeaea;
    border-radius: 1px;
    cursor: pointer;
    color: #ccc;
    font-size: 45px;
    .official_text {
      font-size: 14px;
      color: #000000d1;
    }
  }
  .official_box2 {
    display: flex;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }

    .left {
      margin-right: 10px;
      .el-icon {
        font-size: 60px;
      }
    }
    .right {
      color: #ff5b11;
      text-align-last: left;
      .right_h3 {
        font-weight: 700;
      }
    }
  }
</style>
